<template>
  <div>
    <el-row :gutter="20" v-for="(item, index) in items" :key="index">
      <el-col v-for="(col, index) in item.cols" :span="link === 'webchat' ? 24 : 24 / item.cols.length" :key="index">
        <div v-for="one in col.fields" :key="one._id">
          <b-input
            v-if="one.type === 'single'"
            :label="one.name"
            :default="one.default"
            :id="one._id"
            :require="one.required"
            ref="fields"
            :field="one"
            :placeholder="one.prompt"
            :disabled="disabled"
            @blurEvent="cacheFields"
          ></b-input>
          <b-number
            v-if="one.type === 'number'"
            :label="one.name"
            :default="one.default"
            :id="one._id"
            :placeholder="one.prompt"
            :require="one.required"
            ref="fields"
            :disabled="disabled"
            @blurEvent="cacheFields"
          ></b-number>
          <b-textarea
            v-if="one.type === 'multi'"
            :label="one.name"
            :default="one.default"
            :id="one._id"
            :placeholder="one.prompt"
            :require="one.required"
            ref="fields"
            :field="one"
            :disabled="disabled"
            @blurEvent="cacheFields"
            @paste="paste"
          ></b-textarea>
          <b-radio
            v-if="one.type === 'radio'"
            :label="one.name"
            :dic="one.dic"
            :default="one.default"
            :id="one._id"
            :require="one.required"
            :field="one"
            ref="fields"
            :disabled="disabled"
            @blurEvent="cacheFields"
          ></b-radio>
          <b-checkbox
            v-if="one.type === 'checkbox'"
            :label="one.name"
            :dic="one.dic"
            :default="one.default"
            :id="one._id"
            :require="one.required"
            :field="one"
            ref="fields"
            :disabled="disabled"
            @blurEvent="cacheFields"
          ></b-checkbox>
          <b-datatime
            v-if="one.type === 'date' || one.type === 'datetime'"
            :type="one.type"
            :label="one.name"
            :default="one.default"
            :id="one._id"
            :placeholder="one.prompt"
            :require="one.required"
            ref="fields"
            :disabled="disabled"
            @blurEvent="cacheFields"
          ></b-datatime>
          <b-time
            v-if="one.type === 'time'"
            :label="one.name"
            :default="one.default"
            :placeholder="one.prompt"
            :id="one._id"
            :require="one.required"
            ref="fields"
            :disabled="disabled"
            @blurEvent="cacheFields"
          ></b-time>
          <b-select
            v-if="one.type === 'dropdown'"
            :label="one.name"
            :dic="one.dic"
            :default="one.default"
            :placeholder="one.prompt"
            :id="one._id"
            :require="one.required"
            :field="one"
            ref="fields"
            :disabled="disabled"
            @blurEvent="cacheFields"
          ></b-select>
          <b-tree
            v-if="one.type === 'dropdownTree'"
            :label="one.name"
            :dic="one.dic"
            :default="one.default"
            :placeholderNew="one.prompt"
            :id="one._id"
            :require="one.required"
            :field="one"
            ref="fields"
            :disabled="disabled"
            @blurEvent="cacheFields"
          ></b-tree>
          <b-file
            v-if="one.type === 'file'"
            :label="one.name"
            :default="one.default || []"
            :id="one._id"
            :require="one.required"
            ref="fields"
            :disabled="disabled"
            @showBigImg="showBigImg"
            @blurEvent="cacheFields"
          ></b-file>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="$t('business.attachmentSeletct')"
      :visible="dialogVisible"
      width="400px"
      :before-close="handleClose"
    >
      <el-radio-group v-model="radioFile">
        <el-radio :label="item.id" v-for="(item, index) in files" :key="index">{{ item.label }}</el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" class="primary_btn">{{ $t('public.cancel') }}</el-button>
        <el-button type="primary" @click="confirm" class="primary_btn">{{ $t('public.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import BInput from './Binput.vue'
import BTextarea from './Btextarea.vue'
import BRadio from './Bradio.vue'
import BCheckbox from './Bcheckbox.vue'
import BDatatime from './Bdatatime.vue'
import BTime from './Btime.vue'
import BSelect from './Bselect.vue'
import BTree from './Btree.vue'
import BFile from './Bfile.vue'
import BNumber from './Bnumber.vue'
export default {
  name: 'BaseForm',
  props: {
    items: {
      type: Array,
      default: function () {
        return []
      }
    },
    disabled: { type: Boolean, default: false }
  },
  data() {
    return {
      files: [],
      dialogVisible: false,
      radioFile: '',
      cacheData: {}
    }
  },
  computed: {},
  inject: {
    link: { default: '' }
  },
  components: {
    BInput,
    BTextarea,
    BRadio,
    BCheckbox,
    BDatatime,
    BTime,
    BSelect,
    BFile,
    BNumber,
    BTree
  },
  watch: {},
  methods: {
    showBigImg(data) {
      this.$emit('showBigImg', data)
    },
    cacheFields(data) {
      this.$emit('cacheFields', data)
    },
    handleClose() {
      this.dialogVisible = false
      this.cacheData = {}
      this.files = []
    },
    confirm() {
      if (!this.radioFile) {
        this.$message.error(this.$t('business.attachmentSeletct'))
        return
      }
      let current = this.files.find((item) => item.id === this.radioFile)
      current && current.addfile(this.cacheData.blob, this.cacheData.filename)
      this.handleClose()
    },
    paste({ blob, filename }) {
      if (this.dialogVisible) {
        return
      }
      let files = this.$refs.fields.filter((item) => {
        return item.name === 'file'
      })
      if (!files.length) {
        return
      }
      if (files.length === 1) {
        files[0].addfile(blob, filename)
        return
      }
      if (files.length > 1) {
        this.files = files
        this.radioFile = ''
        this.cacheData = { blob, filename }
        this.dialogVisible = true
      }
    },
    submit(noValide = false) {
      let data = {}
      let pass = true
      let fields = this.$refs.fields || []
      for (let i = 0; i < fields.length; i++) {
        let item = fields[i].submit(noValide)
        if (item.success && pass) {
          Object.assign(data, item.data)
        } else {
          pass = false
        }
      }
      return pass ? data : pass
    }
  },
  mounted() {}
}
</script>
<style lang="stylus" scoped>
@import "../../../../../assets/common.styl"
</style>
